<!--
 * @Description: 
 * @Version: 1.0
 * @Author: yzq
 * @Date: 2025-05-13 10:39:11
 * @FilePath: \web\src\components\MyDetail\index.vue
 * @LastEditors: yzq
 * @LastEditTime: 2025-05-22 15:10:39
-->
<!-- 详情展示 -->
<template>
  <el-drawer :model-value="modelValue" size="700px" :title="title" @close="commEvent.onClose">
    <el-row :gutter="10">
      <el-col v-for="(item, index) in columns" :key="item.key" :span="item.span || 8">
        <div v-if="item.isTitle" class="detail-title" :class="{ 'detail-title2': index !== 0 }">{{ item.label }}</div>
        <div v-else class="detail-col">
          <div class="detail-col-label">{{ item.label }}：</div>
          <div class="detail-col-value">
            <div v-if="item.format">{{ item.format(data[item.key], data) }}</div>
            <el-text v-else :line-clamp="1">{{ data[item.key] || "--" }}</el-text>
          </div>
        </div>
      </el-col>
    </el-row>
  </el-drawer>
</template>

<script setup lang="ts">
import { MyDetailProps } from "@/components/MyDetail/index"
// 组件接受参数
withDefaults(defineProps<MyDetailProps>(), {
  title: "详情",
  modelValue: false,
  columns: () => [],
  data: () => ({})
})
// 组件提供方法
const emits = defineEmits(["update:modelValue"])
// 事件
const commEvent = {
  // 关闭
  onClose: () => {
    emits("update:modelValue", false)
  }
}
</script>

<style lang="scss" scoped>
.detail-title {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  padding-left: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #111111;
  &::before {
    position: absolute;
    left: 0;
    width: 3px;
    height: 20px;
    content: "";
    background-color: var(--el-color-primary);
    border-radius: 5px;
  }
}
.detail-title2 {
  padding-top: 15px;
  margin-top: 15px;
  border-top: 1px solid #eeeeee;
}
.detail-col {
  display: flex;
  width: 100%;
  margin-top: 15px;
  .detail-col-label {
    margin-right: 5px;
    font-size: 14px;
    color: #999999;
  }
  .detail-col-value {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: bold;
    color: #111111;
  }
}
</style>
